<template>
  <div>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item v-if="mode == 0" prop="userName">
        <el-input :prefix-icon="Search" v-model="ruleForm.userName" :placeholder="'请输入账号'" />
      </el-form-item>
      <el-form-item v-else prop="phone">
        <el-input :prefix-icon="Search" v-model="ruleForm.phone" :placeholder="'请输入手机号'" />
      </el-form-item>
      <el-form-item v-if="mode == 0" prop="pass">
        <el-input
          :prefix-icon="Search"
          v-model="ruleForm.pass"
          type="password"
          autocomplete="off"
          :placeholder="'请输入密码'"
        />
      </el-form-item>
      <el-form-item prop="captcha">
        <div class="age-input">
          <el-input
            v-model="ruleForm.captcha"
            class="responsive-input"
            placeholder="请输入验证码"
            :prefix-icon="Search"
          />
          <el-button class="btn-refresh" @click="refreshCode">
            <el-tooltip content="点击刷新" placement="top"> 验证码 </el-tooltip>
          </el-button>
        </div>
      </el-form-item>
      <el-form-item :style="{marginTop: mode == 0 ? '50px' : '100px'}">
        <el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">
          登陆
        </el-button>
        <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {  Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
const props = defineProps({
  mode: {
    type: Number,
    default: 0 //0 账户登录 1手机号码
  }
})

const ruleFormRef = ref<FormInstance>()

const checkAge = (_: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入验证码'))
  }
  setTimeout(() => {
    // if (!Number.isInteger(value)) {
    //   callback(new Error('请输入数字'))
    // } else {
    //   if (value < 18) {
    //     callback(new Error('Age must be greater than 18'))
    //   } else {
    //     callback()
    //   }
    // }
    callback()
  }, 1000)
}

const validatePass = (_: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const validatePass2 = (_: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  userName: '',
  pass: '',
  phone: '',
  captcha: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  userName: [{ validator: validatePass2, trigger: 'blur' }],
  captcha: [{ validator: checkAge, trigger: 'blur' }],
  phone: [{ validator: validatePass2, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('成功!')
    } else {
      console.log('失败')
    }
  })
}
const refreshCode = () => {}
// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }
watch(
  () => props.mode,
  () => {
    if (props.mode == 0) {
      ruleForm.userName = ''
      ruleForm.phone = ''
    } else {
      ruleForm.userName = ''
      ruleForm.phone = ''
    }
  }
)
</script>

<style scoped lang="scss">
.login-btn {
  width: 100%;
}
.age-input {
  display: flex;
  align-items: center;
  width: 100%;
  .responsive-input {
    flex: 1;
    margin-right: 10px;
  }
}
</style>
